<template>
  <div class="score-card-item bg-white p-4 mb-4 rounded-lg">
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center">
        <span class="text-gray-900 font-medium">{{ title }}</span>
        <el-tooltip :content="tooltipContent" placement="top">
          <i class="ml-2 text-gray-400 el-icon-question-filled"></i>
        </el-tooltip>
      </div>
      <span class="text-[#FF4D4F] font-medium">{{ score }}%</span>
    </div>
    
    <div class="flex flex-col gap-2">
      <div v-for="item in items" :key="item.label" class="flex items-center">
        <span class="text-gray-600 min-w-[100px]">{{ item.label }}</span>
        <span class="text-gray-600 mx-2">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  tooltipContent: {
    type: String,
    required: true
  },
  score: {
    type: Number,
    required: true
  },
  items: {
    type: Array,
    required: true
  }
});
</script>

<style lang="less" scoped>
:deep(.el-tooltip__trigger) {
  &:hover {
    color: #FF4D4F;
  }
}
</style> 